<template>
  <div style="color:#000;display:flex;flex-direction: column;">
    <!-- h-modal-header 将自带modal头部样式 -->
    <header class="h-modal-header" style="border-bottom:solid 1px rgba(0,0,0,0.08);height:60px;"> <i class="fas fa-terminal"></i>&nbsp;&nbsp;终端日志&nbsp;&nbsp;<sub class="green-color"
        style="position:relative;top:-2px;">({{guid}})</sub>
      <div class="float-right" style="padding:10px;"><button class="h-btn h-btn-red" @click="close">关闭</button></div>
    </header>
    <div style="padding:15px;flex:1;overflow-y:auto;" ref="terminal" id="terminal" class="terminal-content">

    </div>
    <!-- h-modal-footer 将自带modal底部样式 -->
    <!-- <footer style="height:50px;">
      服务端实时日志
      <button class="h-btn h-btn-primary" @click="success">确定</button>
      <button class="h-btn h-btn-blue" @click="go">跳转</button>

    </footer> -->
  </div>
</template>

<script>
export default {
  props: {
    // params: Object,
    guid: String
  },
  data() {
    return {
      term: null
    }
  },
  mounted: function () {
    //console.warn('初始化终端')
    this.term = this.$Terminal.open(this.guid)
    this.term.onmessage((data) => {
      if(data.replace(/\s*/g,"")==''){return}
      let p_ele = document.createElement('p')
      //   p_ele.className='yellow-color'
      p_ele.innerHTML = data
      this.$refs.terminal.appendChild(p_ele)
      this.$refs.terminal.scrollTop=this.$refs.terminal.scrollHeight
      //console.warn(data)
    })
  },
  beforeDestroy() {
    this.term.close()
  },
  methods: {
    success() {
      // 向外层触发事件, 1.17.0 之前
      // this.$emit('event', 'update', this.value);

      // 直接使用emit触发外部的events监听，兼容性 1.18.0+
      //   this.$emit('success', this.value);
      //   this.close();
    },
    // go() {
    //   // 注意：如果使用HeyUI.$Modal的方式调用，将无法使用$router等vue依赖组件。
    //   this.$router.push({ name: 'Home' });
    //   this.$emit('close');
    // },
    close() {
      this.term.close()
      this.$emit('close');
    }
  }
};
</script>
<style lang="less" scoped>
.terminal-content {
  background: #000;
  color: #fff;
  /deep/ p {
    font-size: 75%;
    vertical-align: baseline;
    // line-height: 0;
    margin: 0;
    padding: 3px;
  }
}
</style>